{extend name="base" /}

{block name="content"}

<script src="__STATIC__/public/My97DatePicker/WdatePicker.js"></script>

<div class="g-main">

    <div class="m-main-title">

        <div class="m-container-fluid">

            <a href="{:url('index/welcome')}"><i class="icon icon-home"></i>首页</a>

            <span class="icon-angle-right"></span>

            <span>系统</span>

            <span class="icon-angle-right"></span>

            <span>会员管理</span>

            <span class="icon-angle-right"></span>

            <span>余额变动</span>

            <a class="u-flush"><i class="icon-repeat"></i></a>

        </div>

    </div>

    <div class="m-main-content">

        <div class="m-container">

            <table class="m-table">

                <tr>

                    <th>

                        <div class="m-options cf">

                            <div class="m-search fr">

                                <form action="" class="layui-form">

                                    <style>
                                        .xiadanhuiyuan{display: inline-block;position: relative}
                                        .xiadanhuiyuan-mask{    position: absolute;
                                            left: 70px;
                                            top: 26px;
                                            background: #fff;
                                            width: 211px;}
                                    </style>
                                    <div class="xiadanhuiyuan">
                                        <label for="keywords">会员名称</label>

                                        <input type="text" name="keywords" id="keywords" class="u-ipt u-ipt-def" placeholder="请输入会员" value="{$keywords}" />
                                        <input type="hidden" name="member_id" id="member_id" class="u-ipt u-ipt-def" value="{$member_id}" />

                                        <ul class="xiadanhuiyuan-mask">
                                        </ul>
                                        <label for="">时间</label>

                                        <input type="text" name="start_time" class="u-ipt u-ipt-small" placeholder="开始时间" value="{$startTime ?: ''}" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly />

                                        <span>-</span>

                                        <input type="text" name="end_time" class="u-ipt u-ipt-small" placeholder="结束时间" value="{$endTime ?: ''}" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly />

                                        <input type="submit" class="u-btn u-search" value="查看" />
                                    </div>

                                </form>

                            </div>

                        </div>

                    </th>

                </tr>

            </table>

            <form class="layui-form">

                <table class="m-table mt-10">

                    <tbody class="datas">

                    <tr>

                        <th width="5%">ID</th>

                        <th width="15%">用户</th>

                        <th width="10%">金额</th>

                        <th width="60%">内容</th>

                        <th width="10%">时间</th>

                    </tr>

                    {foreach name="data" item="v"}

                    <tr>

                        <td>{$v.id}</td>

                        <td>{$v.username}</td>

                        <td>{$v.balance}</td>

                        <td>{$v.remark}</td>

                        <td>{$v.change_time}</td>

                    </tr>

                    {/foreach}

                    </tbody>

                </table>

            </form>

            {include file="public:page" /}

        </div>

    </div>

</div>

{/block}

{block name="extrajs"}
<script>
    $(function() {
        var $that = $(this);
        //输入框的值改变时触发
        $("#keywords").on("input", function (e) {
            //获取input输入的值
            console.log(e.delegateTarget.value);
            $.post('{:url("/manage/members/search")}', {nickname: $(this).val()}, function (ret) {
                if (ret) {

                    var html = '';

                    if (ret.status == 0) {

                        if (ret.data.length > 0) {

                            html += '<ul>';

                            for (var i = 0; i < ret.data.length; i++) {

                                html += '<li onclick="valueChange(' + ret.data[i].id + ')"><a class="u-nick-item" data-value="' + ret.data[i].id + '">' + ret.data[i].nickname + '</a></li>';

                            }

                            html += '</ul>';

                        } else {

                            html = '<h3>暂无搜索结果</h3>';

                        }

                    } else {

                        html = '<h3>暂无搜索结果</h3>';

                    }
                    $('.xiadanhuiyuan-mask').html(html)
                    $('.xiadanhuiyuan-mask').show()
                }
            }, 'JSON');
        });
    });
    function valueChange(id){
        $('#member_id').val(id)
    };
    $(function(){

        layui.use('layer', function(){
            $('body').on('click', '.u-nick-item', function(){

                $(this).parent().parent().parent().prev().attr('data-userid', $(this).attr('data-userid'));

                $(this).parent().parent().parent().prev().prev().val($(this).text());

                $(this).parent().parent().parent().hide();

            });
        })
    })
</script>
    {include file="laypage" /}

{/block}